<template>
  <div>
    <el-card>
      <el-alert title="添加商品" type="warning" center show-icon> </el-alert>

      <el-form ref="cateRef" :rules="goodRules" :model="goods">
        <el-steps
          :space="350"
          :active="Number(active)"
          finish-status="success"
          align-center
        >
          <el-step title="基本信息"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="已完成"></el-step>
        </el-steps>

        <!-- 标签页 -->
        <el-tabs
          :tab-position="'left'"
          style="height: 500px"
          v-model="active"
          :before-leave="changeTab"
        >
          <el-tab-pane label="基本信息">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="goods.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="goods.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="goods.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="goods.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-cascader
                v-model="value"
                :options="options"
                :props="props"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片">
            <el-upload
              action="http://82.156.12.132:8080/api/private/v1/upload"
              list-type="picture-card"
              :headers="headers"
              :on-success="picSuccess"
              :on-remove="picRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容">
            <quill-editor
              v-model="goods.goods_introduce"
              ref="myQuillEditor"
            ></quill-editor>
            <el-button type="primary" @click="addGoodsList" class="btn"
              >提交</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addGoods, optGoods } from "@/utils/axios/goodsApi";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
  components: { quillEditor },
  data() {
    return {
      // 基本信息
      goods: {
        goods_id: "",
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        pics: [],
        goods_introduce: "",
      },

      active: 0,

      value: [],

      options: [],

      props: {
        label: "cat_name",
        value: "cat_id",
      },

      //   验证文本框
      goodRules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      // id
      // id: "",
      // type:'',
      headers: {},
    };
  },

  methods: {
    // 级联选择器s数据
    async getselect() {
      let { data } = await optGoods({ type: 3 });
      console.log(data);
      this.options = data.data;
    },

    // 切换跳转
    changeTab(oneName, twoName) {
      if (oneName != 0) {
        this.$refs.cateRef.validate((valid) => {
          this.flag = valid;
        });
        if (!this.flag) {
          this.$message.error("基本内容不能为空");
          return false;
        }
        if (this.value.length == 0) {
          this.$message.error("请选择分类");
          return false;
        }
      }
    },

    //图片上传成功的钩子函数
    picSuccess(res) {
      this.goods.pics.push({ pic: res.data.tmp_path });
    },

    //删除图片
    picRemove(file) {
      // 删除临时路径
      var tmp_path = file.response.data.tmp_path;
      let index = this.goods.pics.findIndex((item) => {
        return item.tem_path == tmp_path;
      });
      this.goods.pics.splice(index, 1);
    },

    // 添加商品
    addGoodsList() {
      // 添加
      this.$refs.cateRef.validate(async (valid) => {
        if (valid) {
          let { data } = await addGoods(this.goods);
          if (data.meta.status == 201) {
            this.$message.success(data.meta.msg);
            this.$router.push("/goods");
          } else {
            this.$message.error(data.meta.msg);
          }
        }
      });
      // else if(this.type=="edit") {
      //   // 编辑
      //   this.$refs.cateRef.validate(async (valid) => {
      //     if (valid) {
      //       let { data } = await putUpdate(this.goods.goods_id,this.goods);
      //       console.log(this.goods.goods_id,this.goods);
      //       if (data.meta.status == 200) {
      //         this.$message.success(data.meta.msg);
      //         this.$router.push("/goods");
      //       } else {
      //         this.$message.error(data.meta.msg);
      //       }
      //     }
      //   });
      // }
    },

    // // 表单回显
    // async editGoodsList() {
    //   let { data } = await editGoods(this.id);
    //   this.goods = data.data;
    // },
  },

  mounted() {
    this.getselect();
    var token = this.$store.state.tokenObj.token;
    this.headers.Authorization = token;

    // this.id = this.$route.query.id;
    // this.type = this.$route.query.type;
    // if(this.type=="edit"){
    //   this.editGoodsList()
    // }
  },
};
</script>

<style lang="scss" scoped>
.el-steps {
  margin-top: 15px;
}
.btn {
  position: fixed;
  right: 30px;
  top: 600px;
}
</style> 
